<template>
  <div>
    <h2>用药临床观察</h2>
    <el-button size="small" icon="Plus" @click="showEditor = true">新增观察</el-button>
    <div v-show="showEditor">
      <WangEditor ref="wangEditorRef"/>
      <el-button type="primary" @click="saveArticle">保存</el-button>
      <el-button @click="showEditor = false">取消</el-button>
    </div>
    <div v-for="article in articles" :key="article.id">
      <div v-html="article.content" class="editor-content-view" />
      <el-button type="primary" @click="editArticle(article)">编辑</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, nextTick } from "vue";
import { useRoute } from "vue-router";
import useStore from "../../store/index";
import WangEditor from "../../components/WangEditor.vue";
import { createClinicalResult, selectClinicalResultByPatientId } from "../../api/clinicalResults";

const route = useRoute();
const store = useStore();
const showEditor = ref(false);
const articles = reactive([]);
const wangEditorRef = ref<InstanceType<typeof WangEditor> | null>(null);

const saveArticle = async () => {
  try {
    const result = {
      patientId: +route.params.patientId,
      vaccineName: "周秀英",
      teamDesigner: "道",
      antigenType: "角",
      content: store.editorStore.html,
    };
    const response = await createClinicalResult(result);
    console.log("Clinical result response:", response);
    alert("文章已保存！");
    showEditor.value = false;
    store.editorStore.html = '';
    await getClinicalResults();
  } catch (error) {
    console.error("Error in Clinical result API call:", error);
  }
};

const editArticle = async (article: { content: string }) => {
  showEditor.value = true;
  await nextTick();
  if (wangEditorRef.value) {
    wangEditorRef.value.initHtml(article.content);
  }
  store.editorStore.html = article.content;
};

const getClinicalResults = async () => {
  try {
    const response = await selectClinicalResultByPatientId(+route.params.patientId);
    if (response && response.data) {
      articles.splice(0, articles.length, ...response.data);
    }
  } catch (error) {
    console.error("Error fetching clinical results:", error);
  }
};

onMounted(getClinicalResults);
</script>

<style scoped>
.editor-content-view {
  border: 3px solid #ccc;
  border-radius: 5px;
  padding: 0 10px;
  margin-top: 20px;
  overflow-x: auto;
}

.editor-content-view p,
.editor-content-view li {
  white-space: pre-wrap;
}

.editor-content-view blockquote {
  border-left: 8px solid #d0e5f2;
  padding: 10px 10px;
  margin: 10px 0;
  background-color: #f1f1f1;
}

.editor-content-view code {
  font-family: monospace;
  background-color: #eee;
  padding: 3px;
  border-radius: 3px;
}

.editor-content-view pre > code {
  display: block;
  padding: 10px;
}

.editor-content-view table {
  border-collapse: collapse;
}

.editor-content-view td,
.editor-content-view th {
  border: 1px solid #ccc;
  min-width: 50px;
  height: 20px;
}

.editor-content-view th {
  background-color: #f1f1f1;
}

.editor-content-view ul,
.editor-content-view ol {
  padding-left: 20px;
}

.editor-content-view input[type="checkbox"] {
  margin-right: 5px;
}
</style>
